<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right route>
        <van-button  to="/search" icon="search" round>搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>
      <!-- 图标 -->
      <div class="more" @click="editShow = true">
        <van-icon name="wap-nav" size="30" />
      </div>
      <!--
          v-model 双向绑定是一个语法糖 默认生成的是 :value 和 @input
          :value 是父传子 @input 是子传父 可以在model {prop: 'zz',event: 'xx'} 改默认名字和事件
          @update:editShow="editShow = $event"
          @input="active = $event"
       -->
      <van-action-sheet v-model="editShow" title="频道管理">
        <channel-edit
          :allList="allList"
          :channelList="channelList"
          @add="channelList.push($event)"
          @del="channelList = channelList.filter(v => v.id != $event.id)"
          :value="active"
          @update:editShow="editShow = $event"
          @input="active = $event"
        />
        <!-- 父接收 $event 就是子组件传过来的对象 -->
      </van-action-sheet>
    </van-tabs>
  </div>
</template>

<script>
import { channelListAPI, allListAPI, resetListAPI } from '@/api/channel'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      channelList: [],
      editShow: false,
      allList: [],
      isFirst: true
    }
  },
  async created () {
    // 判断是否登录了
    if (this.$store.state.user.tokenObj.token) {
      // 有token 获取这个用户操作过的频道
      const res1 = await channelListAPI()
      // console.log(res)
      this.channelList = res1.data.channels
    } else {
      // 没登录 判断是否有没登录是操作的存的本地数据
      const local = JSON.parse(localStorage.getItem('hmtt-channels'))
      if (local) {
        // 有本地数据 直接取出来
        this.channelList = local
      } else {
        // 没登录 也没有本地数据 发请求 返回默认频道
        const res1 = await channelListAPI()
        this.channelList = res1.data.channels
      }
    }

    // 获取所有频道
    const res2 = await allListAPI()
    this.allList = res2.data.channels
  },
  watch: {
    // 侦听channelList发生变化就做数据持久化
    async channelList () {
      // 判断是不是第一次，如果是第一次不往下执行
      // 能少发第一次的无效请求
      if (this.isFirst) return (this.isFirst = false)

      // 先判断有没有登录 有没有token
      if (this.$store.state.user.tokenObj.token) {
        // 登录了就发送请求 保存到服务器
        const channels = this.channelList.map((v, i) => {
          return {
            id: v.id,
            seq: i
          }
        })
        await resetListAPI({
          channels
        })
      } else {
        // 没登录保存到本地
        localStorage.setItem('hmtt-channels', JSON.stringify(this.channelList))
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  .logo {
    width: 120px;
    height: 100%;
    background: url(@/assets/logo.png) no-repeat center / contain;
  }
  .van-button {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    .van-icon-search,
    .van-button__text {
      color: #fff;
    }
  }
}
.van-tabs {
  ::v-deep .van-tabs__nav {
    padding-right: 30px;
  }
  .more {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
  }
}
</style>
